<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            overflow: hidden;
        }

        .demo {
            width: 30px;
            height: 30px;
            background: url(img/heart.png)0 / 100% 100%;
            position: absolute;
        }

        .kuang {
            width: 30px;
            height: 30px;
            position: absolute;
        }
    </style>
</head>

<body>
    <script>
        var createDiv = (x, y, c) => {
            var div = document.createElement("div")
            div.classList.add(c || "kuang")
            div.style['left'] = x + "px"
            div.style['top'] = y + "px"
            document.body.appendChild(div)
            return div
        }

        for (let i = 6; i < 15; i++) {
            createDiv(30 * i, 200)
        }

        for (let i = 6; i < 12; i++) {
            createDiv(190, i * 30)
        }

        for (let i = 6; i < 14; i++) {
            createDiv(30 * i, 320)
        }

        for (let i = 11; i < 18; i++) {
            createDiv(380, i * 30)
        }

        for (let i = 6; i < 13; i++) {
            createDiv(30 * i, 500)
        }

        for (let i = 20; i < 28; i++) {
            createDiv(30 * i, 200)
        }

        for (let i = 8; i < 12; i++) {
            createDiv(800, i * 30)
        }

        for (let i = 20; i < 28; i++) {
            createDiv(30 * i, 320)
        }

        for (let i = 12; i < 17; i++) {
            createDiv(600, i * 30)
        }

        for (let i = 20; i < 28; i++) {
            createDiv(30 * i, 520)
        }


        for (let i = 30; i < 38; i++) {
            createDiv(i * 30, 200)
        }

        for (let i = 30; i < 38; i++) {
            createDiv(i * 30, 510)
        }

        for (let i = 8; i < 18; i++) {
            createDiv(900, i * 30)
        }

        for (let i = 8; i < 18; i++) {
            createDiv(1100, i * 30)
        }




        var kuanglist = document.getElementsByClassName("kuang")
        window.onmousemove = (e) => {
            var div = createDiv(e.pageX, e.pageY, "demo")

            var x = e.pageX
            var y = e.pageY
            var rnd = Math.round(Math.random())
            var rnd1 = Math.round(Math.random() * (kuanglist.length - 1))
            var timer = setInterval(() => {
                if (rnd) x -= 5
                else x += 5
                y -= 5
                div.style['left'] = x + "px"
                div.style['top'] = y + "px"

                if (y < 0) {
                    clearInterval(timer)
                    div.remove()
                    kuanglist[rnd1].style["background"] = "url(img/heart.png) 0 / 100% 100%"
                }

            }, 50)
        }

    </script>
</body>

</html>